<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script>
    <title>扫码确认登录</title>
    <style>
        #info {
            height: 400px;
            line-height: 400px;
            font-size: 20px;
            padding: 20px;
        }

        #confirm,
        #cancel {
            display: block;
            width: 80%;
            line-height: 40px;
            font-size: 20px;
            margin-bottom: 20px;
        }

        #confirm {
            background: skyblue;
        }
    </style>
</head>

<body>
    <div id="info">
        是否确认登录xxx网站
    </div>
    <button id="confirm">确定登录</button>
    <button id="cancel">取消</button>
    <script>
        const params = new URLSearchParams(window.location.search);
        const id = params.get("id");
        // 如果这个界面打开，就代表已经扫描（因为只有扫描了二维码，才能从二维码中解析出这个确认界面，打开）
        axios.get("http://192.168.244.137:3000/qrcode/scan?id=" + id).catch(e => {
            alert("二维码已过期");
        })

        document.getElementById("confirm").addEventListener("click", () => {
            axios.get("http://192.168.244.137:3000/qrcode/confirm?id=" + id).catch(e => {
                alert("二维码已过期");
            })
        })

        document.getElementById("cancel").addEventListener("click", () => {
            axios.get("http://192.168.244.137:3000/qrcode/cancel?id=" + id).catch(e => {
                alert("二维码已过期");
            })
        })
    </script>
</body>

</html>